<template>
  <div class="container-width app-container">
    <el-carousel height="300px" class="ads" v-if="swiperADS.length > 0" >
      <el-carousel-item v-for="(item, index) in swiperADS" :key="index">
        <!-- <el-tooltip class="item" effect="dark" :content="item.title" placement="top-start"> -->
        <img class="swiper-img" :alt="item.briefDescribe" :src="item.imgPath" />
        <!-- </el-tooltip> -->
      </el-carousel-item>
    </el-carousel>

    <itemLabel name="会员套餐"></itemLabel>
    <div flex="main:justify " style="flex-wrap: wrap; display: flex; justify-content: space-between;">
      <div
    
        v-for="(vipSet, index) in vipSets"
        :key="`teacher_${index}`"
      >
        <vipItem :vipSet="vipSet"></vipItem>
      </div>
    </div>
    <itemLabel name="会员课程" :hot="5"></itemLabel>
    <el-row type="flex" style="flex-wrap: wrap; display: flex; justify-content: start;">
      <el-col
        :span="5"
        :offset="index % 4 ? 1 : 0"
        v-for="(item, index) in courses"
        :key="`class_${index}`"
      >
        <courseItem :courseItem="item"></courseItem>
      </el-col>
      
    </el-row>
    <el-empty v-if="courses.length<=0"></el-empty>
       <el-pagination
      class="pagination"
      @current-change="getList"
      :page-size="pageSize"
      hide-on-single-page
      layout="prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script lang="ts">
import courseItem from "/@/components/courseItem/index.vue";
import itemLabel from "/@/components/itemLabel/index.vue";
import vipItem from "./vipItem.vue";
//import { lessonList } from /"@/api/student/lessons";
//import {bannerList} from "/@/api/student/homePage"

import {useHomePageState} from '/@/store/index';
const homePageState = useHomePageState();
import {courseList} from "/@/api/course/index";

let swiperADS = [];
let courses = [];

export default {
  components: {
    courseItem,
    vipItem,
    itemLabel,
  },
  data() {
    return {
      pageSize:20,
      total:0,
      vipSets: [
        {
          label: "新用户专享",
          name: "年会员",
          price: "498",
          text: "41.5元/月",
          first: true,
        },
        {
          label: "",
          name: "月会员",
          price: "108",
          text: "108元/月",
          first: false,
        },
        {
          label: "超值推荐",
          name: "季会员",
          price: "288",
          text: "96元/月",
          first: false,
        },
        {
          label: "限时优惠",
          name: "年会员",
          price: "998",
          text: "93.16元/月",
          first: false,
        },
      ],

      swiperADS: [],
      courses: [],
    };
  },
  mounted() {
    homePageState.getBanners().then((res) =>{
      this.swiperADS = res ||[];
    });

    this.getList()
    //this.getBanners()
  },
  methods:{
    //   getBanners() {
    //   bannerList()
    //     .then((res) => {
    //       const { bannerInfos } = res;
    //       this.swiperADS = bannerInfos || [];
    //     })
    //     .catch(() => {});
    // },
    getList(page = 1, params = {}){

      let offset = (page - 1) * this.pageSize;
      courseList({
        offset: offset,
        size: this.pageSize,
        ...params,
        vipOnly:true
      })
        .then((res) => {
          const {courseInfos,total} = res;
          this.courses = courseInfos
          this.total = total
        })
        .catch((err) => {console.error(err)});
    }
  }
};
</script>

<style lang="scss" scoped>
.ads {
  border-radius: 6px;
 
}
.swiper-img {
  width: 100%;
  height: 100%;
  cursor: pointer;
}
</style>